<template>
  <div>
    <h1>树形演示</h1>
    <el-tree
      :data="treeData"
      :default-expand-all="true"
      :props="options"
    />
  </div>
</template>

<script>
export default {
//  树形结构数据是嵌套数组
  data() {
    return {
      // 如果数据字段跟默认 label children 不一致
      // 可以传入配置指定字段名
      options: { label: 'name', children: 'nextLevel' },
      treeData: [
      // 每一个对象都是一个节点
      // 节点数据可以无限多,重点在其中两个
      // 1. label 当前节点名
      // 2. children 下级节点的数组
        {
          name: '总裁办'
        },
        {
          name: '技术部',
          nextLevel: [
          // 每级部门数组结构一样
            {
              name: 'Java'
            },
            {
              name: '前端'
            }
          ]
        },
        {
          name: '人事部'
        },
        {
          name: '财务部',
          nextLevel: [
          // 每级部门数组结构一样
            {
              name: '税务'
            },
            {
              name: '薪资'
            }
          ]
        }
      ]
    }
  }
}
</script>

<style>

</style>
